<template>
    <div>
        <div class="chart-tab">
            <div :class="tabPosition == item.value ? 'chart-tab-li chart-tab-active' : 'chart-tab-li'"
             v-for="(item,index) in tabOptons" :value="item.value" :key="index" @click="tabBtn(item.value)">{{ item.name }}</div>
        </div>
        <div class="chart-div">
            <ChartLite v-if="tabPosition == 0" />
            <ChartPro v-if="tabPosition == 1" />
            <ChartUltra v-if="tabPosition == 2" />
            <ChartDeepWeek v-if="tabPosition == 3" />
			<GenerateImg v-if="tabPosition == 4" />
			<HomePlace v-if="tabPosition == 5" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import ChartLite from "./components/ChartLite.vue";
import ChartPro from "./components/ChartPro.vue";
import ChartUltra from "./components/ChartUltra.vue"
import ChartDeepWeek from "./components/ChartDeepWeek.vue"
import GenerateImg from "./components/GenerateImg.vue"
import HomePlace from "./components/HomePlace.vue"

const data = reactive({
	tabPosition: 0,
	tabOptons: [
		{value: 0, label: 'Spark Lite', name: 'Spark'},
		{value: 1, label: 'Spark Pro', name: 'SparkPro'},
		{value: 2, label: 'Spark4.0 Ultra', name: 'Spark4.0'},
        {value: 3, label: 'xdeepseekr1qwen7b', name: 'DeepSeekR1'},
		{value: 4, label: '初音生成图片', name: '初音生成图片'},
		{value: 5, label: '车牌归属地查询', name: '车牌归属地查询'},
	]
})
const { 
	tabPosition, 
	tabOptons
} = toRefs(data);

function tabBtn(val) {
    this.tabPosition = val;
}
</script>

<style lang="less" scoped>

</style>